<template>
	<div>
		<van-form @submit="onRegist">
			<h1>注册页面</h1>
			<van-cell-group inset>
				<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
					:rules="[{ required: true, message: '请填写密码' }]" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					提交
				</van-button>
			</div>
		</van-form>
	</div>
</template>


<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { Notify } from 'vant'
// 获取路由
const router = useRouter()
// 数据
const username = ref<string>('')
const password = ref<string>('')
// 函数
const onRegist = async () => {
	const resp = await axios.post('/api/regist', {
		username: username.value,
		password: password.value
	})
	const { code, message, data } = resp.data

	if (code === 200) {
		Notify({
			type: 'success',
			message,	
			onClose() {
				router.push({ name: 'login' })
			}
		})
	} else {
		Notify({ type: 'danger', message })
	}
}

</script>